<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>在线考试系统</title>
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css}" />
    <link rel="stylesheet" th:href="@{/css/app.css}" />
    <link rel="stylesheet" th:href="@{/css/contest/index.css}" />
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/app.js}"></script>
    <script type="text/javascript" th:src="@{/js/contest/index.js}"></script>
</head>
<body>
<!-- 页面引用：菜单 -->
<div th:replace="common/menu :: menu"></div>

<div class="ui header container">
    <div class="ui large breadcrumb">
        <a class="section" th:href="@{/}"><i class="home icon"></i>首页</a>
        <i class="right chevron icon divider"></i>
        <div class="active section">在线考试</div>
    </div>
</div>

<div class="ui countdownTime container">
    <div class="red ui tiny horizontal statistic">
        <div class="value">
            <i class="wait icon"></i>
            <span id="contest-time-countdown"></span>
        </div>
    </div>
</div>

<div class="ui contestList container">
    <table class="ui table">
        <thead><tr>
            <th class="eight wide">考试名称</th>
            <th class="second wide">开始时间</th>
            <th class="second wide">结束时间</th>
            <th class="second wide">考试科目</th>
            <th class="second wide">操作</th>
        </tr></thead>
        <tbody>
        <tr th:each="item,itemStats : ${data['contests']}">
            <td>
                <span th:if="${item.state == 0}" class="ui yellow ribbon label">未开始</span>
                <span th:if="${item.state == 1}" class="ui green ribbon label">进行中</span>
                <span th:if="${item.state == 2 or item.state == 3}" class="ui red ribbon label">已结束</span>
                <span class="ui header" th:text="${item.title}">
                </span>
            </td>
            <td><span th:text="${#dates.format(item.startTime, 'yyyy-MM-dd HH:mm:ss')}">2018-1-11 09:00:00</span></td>
            <td><span th:text="${#dates.format(item.endTime, 'yyyy-MM-dd HH:mm:ss')}">2018-1-11 11:00:00</span></td>
            <td><span th:text="${item.subjectName}">
                数据库原理与应用
            </span></td>
            <td>
                <a th:if="${item.state == 0}" class="small disabled positive ui button">进入考试</a>
                <a th:if="${item.state == 1 and current_account == null}" th:onclick="'app.showLogin()'" class="small positive ui button">进入考试</a>
                <a th:if="${item.state == 1 and current_account != null}" th:onclick="'contestIndexPage.startToContestAction('+${item.id}+')'" class="small positive ui button">进入考试</a>
                <a th:if="${item.state == 2 or item.state == 3}" class="small disabled grey ui button">进入考试</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!-- 分页 -->
<div class="ui subPage container">
    <div class="ui pagination menu" id="subPageMenu">

    </div>
</div>
<!-- 不可抗力元素 -->
<div class="second-footer">
</div>
<!-- 页脚引用 -->
<div th:replace="common/footer :: footer"></div>
<!-- 登录模态框 -->
<div class="ui mini modal" id="loginModal">
    <div class="header">登录</div>
    <div class="content">
        <form class="ui form" id="loginModalForm">
            <div class="ui hidden negative message" id="loginModalErrorMessage">
                <!--
                <div class="header">错误提示</div>
                <p></p>
                -->
            </div>
            <div class="field required">
                <label>账号</label>
                <div class="ui left icon input">
                    <input id="username" type="text" placeholder="请输入学号或教工号或指定账号" />
                    <i class="user icon"></i>
                </div>
            </div>
            <div class="field required">
                <label>密码</label>
                <div class="ui left icon input">
                    <input id="password" type="password" />
                    <i class="lock icon"></i>
                </div>
            </div>
            <div class="field">
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="rememberMe" name="rememberMe" tabindex="0" class="hidden" />
                    <label>记住登录</label>
                </div>
            </div>
            <div class="ui button" id="loginModalCloseButton">关闭</div>
            <div class="ui primary button" id="loginModalSubmitButton">登录</div>
        </form>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    var pageNum = /*[[${data['pageNum']}]]*/;
    var pageSize = /*[[${data['pageSize']}]]*/;
    var totalPageNum = /*[[${data['totalPageNum']}]]*/;
    var totalPageSize = /*[[${data['totalPageSize']}]]*/;
    var contests = /*[[${data['contests']}]]*/;
    var contextPath = /*[[${#httpServletRequest.getContextPath()}]]*/;

    $(function(){
        app.init(contextPath);
        contestIndexPage.init(pageNum, pageSize, totalPageNum, totalPageSize, contests);
    });
    /*]]>*/
</script>
</body>
</html>